import { useModel, Outlet } from "umi";
import Jdenticon from "react-jdenticon";
import { format } from "timeago.js";
import { Avatar, Rate } from "antd";
import { Layout, Nav } from "@douyinfe/semi-ui";

const { Header, Content } = Layout;

const MessagesPageLayout = () => {
    const { kuboUrl } = useModel("kubo");
    const { messageInfo } = useModel("message.info");

    return (
        <div>
            <Header style={{ backgroundColor: "var(--semi-color-bg-1)", borderTop: "1px solid var(--semi-color-border)" }}>
                <Nav mode={"horizontal"} style={{ border: 0 }}>
                    <Nav.Header
                        logo={
                            <Avatar
                                shape="square"
                                src={kuboUrl && messageInfo?.mmSdav ? kuboUrl + messageInfo.mmSdav : <Jdenticon size="36" value={messageInfo.mmSder || ""} />}
                                size={36}
                            />
                        }
                        text={messageInfo.mmSder + (messageInfo.mmSdpt ? " - " + messageInfo.mmSdpt : "")}
                    />
                    <div style={{ marginLeft: 30 }}>时间：{format(formatUTCTime(messageInfo.mmCrti), "zh_CN")}</div>
                    <Nav.Footer>
                        <Rate value={messageInfo.mmLevl} style={{ fontSize: 12, color: "red", marginRight: 30 }} />
                        {messageInfo.mmScen}
                    </Nav.Footer>
                </Nav>
            </Header>

            <Content id="main-body" style={{ backgroundColor: "var(--semi-color-fill-0)", position: "fixed", left: 0, top: 93, right: 0, bottom: 0 }}>
                <Outlet />
            </Content>
        </div>
    );
};

export default MessagesPageLayout;
